{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Vertexes, Shapes, and Rotation\n",
    "\n",
    "First, let's look at a new way of drawing shapes:\n",
    "\n",
    "```java\n",
    "beginShape();\n",
    "vertex(X, Y);\n",
    "...\n",
    "endShape();\n",
    "```"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 94,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<canvas id=\"canvas_29\"></canvas>\n",
       "<script>\n",
       "require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function () {\n",
       "    var processingCode = '\\nfill(255, 0, 128);\\nbeginShape();\\nvertex(10, 10);\\nvertex(70, 10);\\nvertex(80, 80);\\nvertex(40, 80);\\nvertex(5, 50);\\nvertex(10, 10);\\nendShape();';\n",
       "    var cc = Processing.compile(processingCode);\n",
       "    var processingInstance = new Processing(\"canvas_29\", cc);\n",
       "});\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%processing\n",
    "\n",
    "fill(255, 0, 128);\n",
    "beginShape();\n",
    "vertex(10, 10);\n",
    "vertex(70, 10);\n",
    "vertex(80, 80);\n",
    "vertex(40, 80);\n",
    "vertex(5, 50);\n",
    "vertex(10, 10);\n",
    "endShape();"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Let's use what we know about making functions to put that code into a function, so that we can call it whenever we want:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 95,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<canvas id=\"canvas_30\"></canvas>\n",
       "<script>\n",
       "require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function () {\n",
       "    var processingCode = '\\nvoid drawShape() {\\n    fill(255, 0, 128);\\n    beginShape();\\n    vertex(10, 10);\\n    vertex(70, 10);\\n    vertex(80, 80);\\n    vertex(40, 80);\\n    vertex(5, 50);\\n    vertex(10, 10);\\n    endShape();\\n}\\n\\nvoid draw() {\\n    drawShape();\\n}';\n",
       "    var cc = Processing.compile(processingCode);\n",
       "    var processingInstance = new Processing(\"canvas_30\", cc);\n",
       "});\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%processing\n",
    "\n",
    "void drawShape() {\n",
    "    fill(255, 0, 128);\n",
    "    beginShape();\n",
    "    vertex(10, 10);\n",
    "    vertex(70, 10);\n",
    "    vertex(80, 80);\n",
    "    vertex(40, 80);\n",
    "    vertex(5, 50);\n",
    "    vertex(10, 10);\n",
    "    endShape();\n",
    "}\n",
    "\n",
    "void draw() {\n",
    "    drawShape();\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "However, that only allows drawing it in one place. Let's add parameters so that we can draw it wherever we want:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 96,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<canvas id=\"canvas_31\"></canvas>\n",
       "<script>\n",
       "require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function () {\n",
       "    var processingCode = '\\nvoid drawShape(float x, float y) {\\n    fill(255, 0, 128);\\n    beginShape();\\n    vertex(10 + x, 10 + y);\\n    vertex(70 + x, 10 + y);\\n    vertex(80 + x, 80 + y);\\n    vertex(40 + x, 80 + y);\\n    vertex(5 + x, 50 + y);\\n    vertex(10 + x, 10 + y);\\n    endShape();\\n}\\n\\nvoid draw() {\\n    drawShape(0, 0);\\n    drawShape(50, 50);\\n}';\n",
       "    var cc = Processing.compile(processingCode);\n",
       "    var processingInstance = new Processing(\"canvas_31\", cc);\n",
       "});\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%processing\n",
    "\n",
    "void drawShape(float x, float y) {\n",
    "    fill(255, 0, 128);\n",
    "    beginShape();\n",
    "    vertex(10 + x, 10 + y);\n",
    "    vertex(70 + x, 10 + y);\n",
    "    vertex(80 + x, 80 + y);\n",
    "    vertex(40 + x, 80 + y);\n",
    "    vertex(5 + x, 50 + y);\n",
    "    vertex(10 + x, 10 + y);\n",
    "    endShape();\n",
    "}\n",
    "\n",
    "void draw() {\n",
    "    drawShape(0, 0);\n",
    "    drawShape(50, 50);\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Cool! But 0,0 isn't a good way of describing the position of that shape. Let's subtract the center point from each x,y so that it reflects better its center:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 97,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<canvas id=\"canvas_32\"></canvas>\n",
       "<script>\n",
       "require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function () {\n",
       "    var processingCode = '\\nvoid drawShape(float x, float y) {\\n    fill(255, 0, 128);\\n    beginShape();\\n    vertex(10 + x - 50, 10 + y - 50);\\n    vertex(70 + x - 50, 10 + y - 50);\\n    vertex(80 + x - 50, 80 + y - 50);\\n    vertex(40 + x - 50, 80 + y - 50);\\n    vertex(5 + x - 50, 50 + y - 50);\\n    vertex(10 + x - 50, 10 + y - 50);\\n    endShape();\\n}\\n\\nvoid draw() {\\n    drawShape(0, 0);\\n    drawShape(50, 50);\\n}';\n",
       "    var cc = Processing.compile(processingCode);\n",
       "    var processingInstance = new Processing(\"canvas_32\", cc);\n",
       "});\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%processing\n",
    "\n",
    "void drawShape(float x, float y) {\n",
    "    fill(255, 0, 128);\n",
    "    beginShape();\n",
    "    vertex(10 + x - 50, 10 + y - 50);\n",
    "    vertex(70 + x - 50, 10 + y - 50);\n",
    "    vertex(80 + x - 50, 80 + y - 50);\n",
    "    vertex(40 + x - 50, 80 + y - 50);\n",
    "    vertex(5 + x - 50, 50 + y - 50);\n",
    "    vertex(10 + x - 50, 10 + y - 50);\n",
    "    endShape();\n",
    "}\n",
    "\n",
    "void draw() {\n",
    "    drawShape(0, 0);\n",
    "    drawShape(50, 50);\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "As we saw with the last lab, we can rotate a point around another point by using sin and cos. So, we could do that for every point in our shape to rotate it.\n",
    "\n",
    "We could do that for each point"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 99,
   "metadata": {
    "collapsed": false,
    "format": "row"
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "        var component = document.getElementById(\"sketch_61\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"state_61\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"controls_div_61\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "            // FIXME: Stop all previously running versions (?)\n",
       "            var processingInstance = Processing.getInstanceById(\"canvas_61\");\n",
       "            if (processingInstance != undefined && processingInstance.isRunning())\n",
       "                processingInstance.noLoop();\n",
       "        });\n",
       "\n",
       "\n",
       "        var output_area = this;\n",
       "        // find my cell element\n",
       "        var cell_element = output_area.element.parents('.cell');\n",
       "        // which cell is it?\n",
       "        var cell_idx = Jupyter.notebook.get_cell_elements().index(cell_element);\n",
       "        // get the cell object\n",
       "        var cell = Jupyter.notebook.get_cell(cell_idx);\n",
       "\n",
       "        function jyp_print(cell, newline) {\n",
       "            return function(message) {\n",
       "                cell.get_callbacks().iopub.output({header: {\"msg_type\": \"stream\"},\n",
       "                                                   content: {text: message + newline,\n",
       "                                                             name: \"stdout\"}});\n",
       "            }\n",
       "        }\n",
       "        window.jyp_println = jyp_print(cell, \"\\n\");\n",
       "        window.jyp_print = jyp_print(cell, \"\");\n",
       "\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "           Processing.logger.println = jyp_print(cell, \"\\n\");\n",
       "           Processing.logger.print = jyp_print(cell, \"\");\n",
       "        });\n",
       "\n",
       "\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<div id=\"canvas_div_61\">\n",
       "  <b>Sketch #61:</b><br/>\n",
       "  <canvas id=\"canvas_61\"></canvas><br/>\n",
       "</div>\n",
       "<div id=\"controls_div_61\">\n",
       "  <button id=\"run_button_61\" onclick=\"startSketch('61');\">\n",
       "    <i class=\"fa fa-play-circle-o\" style=\"size: 2em;\"></i>\n",
       "        Run\n",
       "  </button>\n",
       "  <button id=\"pause_button_61\" onclick=\"pauseSketch('61');\">\n",
       "    <i class=\"fa fa-pause\" style=\"size: 2em;\"></i>\n",
       "        Pause\n",
       "  </button>\n",
       "  <button id=\"setup_button_61\" onclick=\"setupSketch('61');\">\n",
       "    setup()\n",
       "  </button>\n",
       "  <button id=\"draw_button_61\" onclick=\"drawSketch('61');\">\n",
       "    draw()\n",
       "  </button>\n",
       "</div>\n",
       "<b>Sketch #61 state:</b> <span id=\"state_61\">Loading...</span><br/>\n",
       "<script>\n",
       "\n",
       "function change_button(button, disable) {\n",
       "    button.disabled = disable;\n",
       "    if (disable) {\n",
       "        button.style.color = \"grey\";\n",
       "    } else {\n",
       "        button.style.color = \"black\";\n",
       "    }\n",
       "}\n",
       "\n",
       "function startSketch(id) {\n",
       "    switchSketchState(id, true);\n",
       "}\n",
       "\n",
       "function pauseSketch(id) {\n",
       "    switchSketchState(id, false);\n",
       "}\n",
       "\n",
       "function drawSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Drawing...\";\n",
       "            try {\n",
       "                processingInstance.redraw();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Drawing... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No drawing() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function setupSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.setup != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Setting up...\";\n",
       "            try {\n",
       "                processingInstance.setup();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Setting up... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No setup() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function switchSketchState(id, on) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (on) {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Running...\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"green\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id),  true);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), true);\n",
       "        processingInstance.loop();  // call Processing loop() function\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Paused.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "        processingInstance.noLoop(); // stop animation, call noLoop()\n",
       "    }\n",
       "}\n",
       "\n",
       "require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function () {\n",
       "    var processingCode = '//%%processing\\n\\nfloat rotateAroundX(float ox, float oy, float px, float py, float angle) {\\n    float qx = ox + cos(angle) * (px - ox) + sin(angle) * (py - oy);\\n    return qx;\\n}\\n\\nfloat rotateAroundY(float ox, float oy, float px, float py, float angle) {\\n    float qy = oy - sin(angle) * (px - ox) + cos(angle) * (py - oy);\\n    return qy;\\n}\\n   \\nvoid drawShape(float x, float y, float angle) {\\n    fill(255, 0, 128);\\n    beginShape();\\n    vertex(rotateAroundX(x, y, 10, 10, angle),\\n           rotateAroundY(x, y, 10, 10, angle));\\n    vertex(rotateAroundX(x, y, 70, 10, angle),\\n           rotateAroundY(x, y, 70, 10, angle));\\n    vertex(rotateAroundX(x, y, 80, 80, angle),\\n           rotateAroundY(x, y, 80, 80, angle));\\n    vertex(rotateAroundX(x, y, 40, 80, angle),\\n           rotateAroundY(x, y, 40, 80, angle));\\n    vertex(rotateAroundX(x, y, 5, 50, angle),\\n           rotateAroundY(x, y, 5, 50, angle));\\n    vertex(rotateAroundX(x, y, 10, 10, angle),\\n           rotateAroundY(x, y, 10, 10, angle));\\n    endShape();\\n}\\n\\nfloat angle;\\n\\nvoid setup() {\\n    angle = 0.0;\\n    background(128);\\n}\\n\\nvoid draw() {\\n    drawShape(50, 50, angle); // 45 degrees\\n    angle += .1;\\n}';\n",
       "    var cc;\n",
       "    var processingInstance;\n",
       "    var has_error = false;\n",
       "\n",
       "    try {\n",
       "        cc = Processing.compile(processingCode);\n",
       "    } catch (e) {\n",
       "        console.log(e);\n",
       "        cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "        document.getElementById(\"state_61\").innerHTML = e.toString();\n",
       "        document.getElementById(\"state_61\").style.color = \"red\";\n",
       "        has_error = true;\n",
       "    }\n",
       "    if (cc != undefined) {\n",
       "        try {\n",
       "            processingInstance = new Processing(\"canvas_61\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "        } catch (e) {\n",
       "            console.log(e);\n",
       "            cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "            document.getElementById(\"state_61\").innerHTML = e.toString();\n",
       "            document.getElementById(\"state_61\").style.color = \"red\";\n",
       "            processingInstance = new Processing(\"canvas_61\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "            has_error = true;\n",
       "        }\n",
       "    }\n",
       "    if (processingInstance != undefined) {\n",
       "        setTimeout(function () {\n",
       "            // Canvas:\n",
       "            if (processingInstance.externals.context === undefined) {\n",
       "                document.getElementById(\"canvas_div_61\").style.display = \"none\";\n",
       "            }\n",
       "        }, 100);\n",
       "        // Controls:\n",
       "        if (!(processingInstance.isRunning() && processingInstance.draw != undefined)) {\n",
       "            document.getElementById(\"controls_div_61\").style.display = \"none\";\n",
       "        }\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_61\").innerHTML = \"Running...\";\n",
       "                document.getElementById(\"state_61\").style.color = \"green\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_61\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_61\"), false);\n",
       "            change_button(document.getElementById(\"setup_button_61\"),  true);\n",
       "            change_button(document.getElementById(\"draw_button_61\"), true);\n",
       "        } else {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_61\").innerHTML = \"Done.\";\n",
       "                document.getElementById(\"state_61\").style.color = \"blue\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_61\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_61\"), true);\n",
       "            change_button(document.getElementById(\"setup_button_61\"),  processingInstance.setup == undefined);\n",
       "            change_button(document.getElementById(\"draw_button_61\"), true);\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"canvas_div_61\").style.display = \"none\";\n",
       "        document.getElementById(\"controls_div_61\").style.display = \"none\";\n",
       "        if (!has_error) {\n",
       "            document.getElementById(\"state_61\").innerHTML = \"Error.\";\n",
       "            document.getElementById(\"state_61\").style.color = \"red\";\n",
       "        }\n",
       "        change_button(document.getElementById(\"run_button_61\"), true);\n",
       "        change_button(document.getElementById(\"pause_button_61\"), true);\n",
       "        change_button(document.getElementById(\"setup_button_61\"),  true);\n",
       "        change_button(document.getElementById(\"draw_button_61\"), true);\n",
       "    }\n",
       "});\n",
       "\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%processing\n",
    "\n",
    "float rotateAroundX(float ox, float oy, float px, float py, float angle) {\n",
    "    float qx = ox + cos(angle) * (px - ox) + sin(angle) * (py - oy);\n",
    "    return qx;\n",
    "}\n",
    "\n",
    "float rotateAroundY(float ox, float oy, float px, float py, float angle) {\n",
    "    float qy = oy - sin(angle) * (px - ox) + cos(angle) * (py - oy);\n",
    "    return qy;\n",
    "}\n",
    "   \n",
    "void drawShape(float x, float y, float angle) {\n",
    "    fill(255, 0, 128);\n",
    "    beginShape();\n",
    "    vertex(rotateAroundX(x, y, 10, 10, angle),\n",
    "           rotateAroundY(x, y, 10, 10, angle));\n",
    "    vertex(rotateAroundX(x, y, 70, 10, angle),\n",
    "           rotateAroundY(x, y, 70, 10, angle));\n",
    "    vertex(rotateAroundX(x, y, 80, 80, angle),\n",
    "           rotateAroundY(x, y, 80, 80, angle));\n",
    "    vertex(rotateAroundX(x, y, 40, 80, angle),\n",
    "           rotateAroundY(x, y, 40, 80, angle));\n",
    "    vertex(rotateAroundX(x, y, 5, 50, angle),\n",
    "           rotateAroundY(x, y, 5, 50, angle));\n",
    "    vertex(rotateAroundX(x, y, 10, 10, angle),\n",
    "           rotateAroundY(x, y, 10, 10, angle));\n",
    "    endShape();\n",
    "}\n",
    "\n",
    "float angle;\n",
    "\n",
    "void setup() {\n",
    "    angle = 0.0;\n",
    "    background(128);\n",
    "}\n",
    "\n",
    "void draw() {\n",
    "    drawShape(50, 50, angle); // 45 degrees\n",
    "    angle += .1;\n",
    "}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 108,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "        var component = document.getElementById(\"sketch_70\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"state_70\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"controls_div_70\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "            // FIXME: Stop all previously running versions (?)\n",
       "            var processingInstance = Processing.getInstanceById(\"canvas_70\");\n",
       "            if (processingInstance != undefined && processingInstance.isRunning())\n",
       "                processingInstance.noLoop();\n",
       "        });\n",
       "\n",
       "\n",
       "        var output_area = this;\n",
       "        // find my cell element\n",
       "        var cell_element = output_area.element.parents('.cell');\n",
       "        // which cell is it?\n",
       "        var cell_idx = Jupyter.notebook.get_cell_elements().index(cell_element);\n",
       "        // get the cell object\n",
       "        var cell = Jupyter.notebook.get_cell(cell_idx);\n",
       "\n",
       "        function jyp_print(cell, newline) {\n",
       "            return function(message) {\n",
       "                cell.get_callbacks().iopub.output({header: {\"msg_type\": \"stream\"},\n",
       "                                                   content: {text: message + newline,\n",
       "                                                             name: \"stdout\"}});\n",
       "            }\n",
       "        }\n",
       "        window.jyp_println = jyp_print(cell, \"\\n\");\n",
       "        window.jyp_print = jyp_print(cell, \"\");\n",
       "\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "           Processing.logger.println = jyp_print(cell, \"\\n\");\n",
       "           Processing.logger.print = jyp_print(cell, \"\");\n",
       "        });\n",
       "\n",
       "\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<div id=\"canvas_div_70\">\n",
       "  <b>Sketch #70:</b><br/>\n",
       "  <canvas id=\"canvas_70\"></canvas><br/>\n",
       "</div>\n",
       "<div id=\"controls_div_70\">\n",
       "  <button id=\"run_button_70\" onclick=\"startSketch('70');\">\n",
       "    <i class=\"fa fa-play-circle-o\" style=\"size: 2em;\"></i>\n",
       "        Run\n",
       "  </button>\n",
       "  <button id=\"pause_button_70\" onclick=\"pauseSketch('70');\">\n",
       "    <i class=\"fa fa-pause\" style=\"size: 2em;\"></i>\n",
       "        Pause\n",
       "  </button>\n",
       "  <button id=\"setup_button_70\" onclick=\"setupSketch('70');\">\n",
       "    setup()\n",
       "  </button>\n",
       "  <button id=\"draw_button_70\" onclick=\"drawSketch('70');\">\n",
       "    draw()\n",
       "  </button>\n",
       "</div>\n",
       "<b>Sketch #70 state:</b> <span id=\"state_70\">Loading...</span><br/>\n",
       "<script>\n",
       "\n",
       "function change_button(button, disable) {\n",
       "    button.disabled = disable;\n",
       "    if (disable) {\n",
       "        button.style.color = \"grey\";\n",
       "    } else {\n",
       "        button.style.color = \"black\";\n",
       "    }\n",
       "}\n",
       "\n",
       "function startSketch(id) {\n",
       "    switchSketchState(id, true);\n",
       "}\n",
       "\n",
       "function pauseSketch(id) {\n",
       "    switchSketchState(id, false);\n",
       "}\n",
       "\n",
       "function drawSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Drawing...\";\n",
       "            try {\n",
       "                processingInstance.redraw();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Drawing... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No drawing() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function setupSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.setup != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Setting up...\";\n",
       "            try {\n",
       "                processingInstance.setup();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Setting up... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No setup() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function switchSketchState(id, on) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (on) {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Running...\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"green\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id),  true);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), true);\n",
       "        processingInstance.loop();  // call Processing loop() function\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Paused.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "        processingInstance.noLoop(); // stop animation, call noLoop()\n",
       "    }\n",
       "}\n",
       "\n",
       "require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function () {\n",
       "    var processingCode = '//%%processing\\n\\nvoid drawShape(float x, float y, float angle) {\\n    fill(255, 0, 128);\\n    pushMatrix();\\n    translate(x, y);\\n    rotate(angle);\\n    beginShape();\\n    /*\\n    vertex(10 - 50, 10 - 50);\\n    vertex(70 - 50, 10 - 50);\\n    vertex(80 - 50, 80 - 50);\\n    vertex(40 - 50, 80 - 50);\\n    vertex(5 - 50, 50 - 50);\\n    vertex(10 - 50, 10 - 50);\\n    */\\n    vertex(10 - 30, 10 - 40);\\n    vertex(70 - 30, 10 - 40);\\n    vertex(80 - 30, 80 - 40);\\n    vertex(40 - 30, 80 - 40);\\n    vertex(5 - 30, 50 - 40);\\n    vertex(10 - 30, 10 - 40);\\n    endShape();\\n    popMatrix();\\n}\\n\\nfloat angle = 0.0;\\n\\nvoid setup() {\\n    size(500, 500);\\n}\\n\\nvoid draw() {\\n    background(0);\\n    drawShape(250, 250, angle);\\n    angle += .1;\\n}';\n",
       "    var cc;\n",
       "    var processingInstance;\n",
       "    var has_error = false;\n",
       "\n",
       "    try {\n",
       "        cc = Processing.compile(processingCode);\n",
       "    } catch (e) {\n",
       "        console.log(e);\n",
       "        cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "        document.getElementById(\"state_70\").innerHTML = e.toString();\n",
       "        document.getElementById(\"state_70\").style.color = \"red\";\n",
       "        has_error = true;\n",
       "    }\n",
       "    if (cc != undefined) {\n",
       "        try {\n",
       "            processingInstance = new Processing(\"canvas_70\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "        } catch (e) {\n",
       "            console.log(e);\n",
       "            cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "            document.getElementById(\"state_70\").innerHTML = e.toString();\n",
       "            document.getElementById(\"state_70\").style.color = \"red\";\n",
       "            processingInstance = new Processing(\"canvas_70\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "            has_error = true;\n",
       "        }\n",
       "    }\n",
       "    if (processingInstance != undefined) {\n",
       "        setTimeout(function () {\n",
       "            // Canvas:\n",
       "            if (processingInstance.externals.context === undefined) {\n",
       "                document.getElementById(\"canvas_div_70\").style.display = \"none\";\n",
       "            }\n",
       "        }, 100);\n",
       "        // Controls:\n",
       "        if (!(processingInstance.isRunning() && processingInstance.draw != undefined)) {\n",
       "            document.getElementById(\"controls_div_70\").style.display = \"none\";\n",
       "        }\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_70\").innerHTML = \"Running...\";\n",
       "                document.getElementById(\"state_70\").style.color = \"green\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_70\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_70\"), false);\n",
       "            change_button(document.getElementById(\"setup_button_70\"),  true);\n",
       "            change_button(document.getElementById(\"draw_button_70\"), true);\n",
       "        } else {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_70\").innerHTML = \"Done.\";\n",
       "                document.getElementById(\"state_70\").style.color = \"blue\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_70\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_70\"), true);\n",
       "            change_button(document.getElementById(\"setup_button_70\"),  processingInstance.setup == undefined);\n",
       "            change_button(document.getElementById(\"draw_button_70\"), true);\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"canvas_div_70\").style.display = \"none\";\n",
       "        document.getElementById(\"controls_div_70\").style.display = \"none\";\n",
       "        if (!has_error) {\n",
       "            document.getElementById(\"state_70\").innerHTML = \"Error.\";\n",
       "            document.getElementById(\"state_70\").style.color = \"red\";\n",
       "        }\n",
       "        change_button(document.getElementById(\"run_button_70\"), true);\n",
       "        change_button(document.getElementById(\"pause_button_70\"), true);\n",
       "        change_button(document.getElementById(\"setup_button_70\"),  true);\n",
       "        change_button(document.getElementById(\"draw_button_70\"), true);\n",
       "    }\n",
       "});\n",
       "\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "//%%processing\n",
    "\n",
    "void drawShape(float x, float y, float angle) {\n",
    "    fill(255, 0, 128);\n",
    "    pushMatrix();\n",
    "    translate(x, y);\n",
    "    rotate(angle);\n",
    "    beginShape();\n",
    "    /*\n",
    "    vertex(10 - 50, 10 - 50);\n",
    "    vertex(70 - 50, 10 - 50);\n",
    "    vertex(80 - 50, 80 - 50);\n",
    "    vertex(40 - 50, 80 - 50);\n",
    "    vertex(5 - 50, 50 - 50);\n",
    "    vertex(10 - 50, 10 - 50);\n",
    "    */\n",
    "    vertex(10 - 30, 10 - 40);\n",
    "    vertex(70 - 30, 10 - 40);\n",
    "    vertex(80 - 30, 80 - 40);\n",
    "    vertex(40 - 30, 80 - 40);\n",
    "    vertex(5 - 30, 50 - 40);\n",
    "    vertex(10 - 30, 10 - 40);\n",
    "    endShape();\n",
    "    popMatrix();\n",
    "}\n",
    "\n",
    "float angle = 0.0;\n",
    "\n",
    "void setup() {\n",
    "    size(500, 500);\n",
    "}\n",
    "\n",
    "void draw() {\n",
    "    background(0);\n",
    "    drawShape(250, 250, angle);\n",
    "    angle += .1;\n",
    "}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 110,
   "metadata": {
    "collapsed": false,
    "scrolled": true
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "        var component = document.getElementById(\"sketch_72\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"state_72\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"controls_div_72\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "            // FIXME: Stop all previously running versions (?)\n",
       "            var processingInstance = Processing.getInstanceById(\"canvas_72\");\n",
       "            if (processingInstance != undefined && processingInstance.isRunning())\n",
       "                processingInstance.noLoop();\n",
       "        });\n",
       "\n",
       "\n",
       "        var output_area = this;\n",
       "        // find my cell element\n",
       "        var cell_element = output_area.element.parents('.cell');\n",
       "        // which cell is it?\n",
       "        var cell_idx = Jupyter.notebook.get_cell_elements().index(cell_element);\n",
       "        // get the cell object\n",
       "        var cell = Jupyter.notebook.get_cell(cell_idx);\n",
       "\n",
       "        function jyp_print(cell, newline) {\n",
       "            return function(message) {\n",
       "                cell.get_callbacks().iopub.output({header: {\"msg_type\": \"stream\"},\n",
       "                                                   content: {text: message + newline,\n",
       "                                                             name: \"stdout\"}});\n",
       "            }\n",
       "        }\n",
       "        window.jyp_println = jyp_print(cell, \"\\n\");\n",
       "        window.jyp_print = jyp_print(cell, \"\");\n",
       "\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "           Processing.logger.println = jyp_print(cell, \"\\n\");\n",
       "           Processing.logger.print = jyp_print(cell, \"\");\n",
       "        });\n",
       "\n",
       "\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<div id=\"canvas_div_72\">\n",
       "  <b>Sketch #72:</b><br/>\n",
       "  <canvas id=\"canvas_72\"></canvas><br/>\n",
       "</div>\n",
       "<div id=\"controls_div_72\">\n",
       "  <button id=\"run_button_72\" onclick=\"startSketch('72');\">\n",
       "    <i class=\"fa fa-play-circle-o\" style=\"size: 2em;\"></i>\n",
       "        Run\n",
       "  </button>\n",
       "  <button id=\"pause_button_72\" onclick=\"pauseSketch('72');\">\n",
       "    <i class=\"fa fa-pause\" style=\"size: 2em;\"></i>\n",
       "        Pause\n",
       "  </button>\n",
       "  <button id=\"setup_button_72\" onclick=\"setupSketch('72');\">\n",
       "    setup()\n",
       "  </button>\n",
       "  <button id=\"draw_button_72\" onclick=\"drawSketch('72');\">\n",
       "    draw()\n",
       "  </button>\n",
       "</div>\n",
       "<b>Sketch #72 state:</b> <span id=\"state_72\">Loading...</span><br/>\n",
       "<script>\n",
       "\n",
       "function change_button(button, disable) {\n",
       "    button.disabled = disable;\n",
       "    if (disable) {\n",
       "        button.style.color = \"grey\";\n",
       "    } else {\n",
       "        button.style.color = \"black\";\n",
       "    }\n",
       "}\n",
       "\n",
       "function startSketch(id) {\n",
       "    switchSketchState(id, true);\n",
       "}\n",
       "\n",
       "function pauseSketch(id) {\n",
       "    switchSketchState(id, false);\n",
       "}\n",
       "\n",
       "function drawSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Drawing...\";\n",
       "            try {\n",
       "                processingInstance.redraw();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Drawing... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No drawing() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function setupSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.setup != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Setting up...\";\n",
       "            try {\n",
       "                processingInstance.setup();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Setting up... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No setup() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function switchSketchState(id, on) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (on) {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Running...\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"green\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id),  true);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), true);\n",
       "        processingInstance.loop();  // call Processing loop() function\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Paused.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "        processingInstance.noLoop(); // stop animation, call noLoop()\n",
       "    }\n",
       "}\n",
       "\n",
       "require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function () {\n",
       "    var processingCode = 'void setup() {\\n    size(500, 500);\\n    fill(0);\\n    ellipse(width/2, height/2, 5, 5);\\n    println(\"----------------------------------\");\\n}\\n\\nfloat last_x = 0;\\nfloat last_y = 0;\\n\\nvoid mouseDragged() {\\n    if (mouseX != last_x && mouseY != last_y) {\\n        println(\"    vertex(\" + int(mouseX - width/2) + \" + x, \" \\n                + int(mouseY - height/2) + \" + y);\");\\n        rect(mouseX, mouseY, 5, 5);\\n        last_x = mouseX;\\n        last_y = mouseY;\\n    }\\n}';\n",
       "    var cc;\n",
       "    var processingInstance;\n",
       "    var has_error = false;\n",
       "\n",
       "    try {\n",
       "        cc = Processing.compile(processingCode);\n",
       "    } catch (e) {\n",
       "        console.log(e);\n",
       "        cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "        document.getElementById(\"state_72\").innerHTML = e.toString();\n",
       "        document.getElementById(\"state_72\").style.color = \"red\";\n",
       "        has_error = true;\n",
       "    }\n",
       "    if (cc != undefined) {\n",
       "        try {\n",
       "            processingInstance = new Processing(\"canvas_72\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "        } catch (e) {\n",
       "            console.log(e);\n",
       "            cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "            document.getElementById(\"state_72\").innerHTML = e.toString();\n",
       "            document.getElementById(\"state_72\").style.color = \"red\";\n",
       "            processingInstance = new Processing(\"canvas_72\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "            has_error = true;\n",
       "        }\n",
       "    }\n",
       "    if (processingInstance != undefined) {\n",
       "        setTimeout(function () {\n",
       "            // Canvas:\n",
       "            if (processingInstance.externals.context === undefined) {\n",
       "                document.getElementById(\"canvas_div_72\").style.display = \"none\";\n",
       "            }\n",
       "        }, 100);\n",
       "        // Controls:\n",
       "        if (!(processingInstance.isRunning() && processingInstance.draw != undefined)) {\n",
       "            document.getElementById(\"controls_div_72\").style.display = \"none\";\n",
       "        }\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_72\").innerHTML = \"Running...\";\n",
       "                document.getElementById(\"state_72\").style.color = \"green\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_72\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_72\"), false);\n",
       "            change_button(document.getElementById(\"setup_button_72\"),  true);\n",
       "            change_button(document.getElementById(\"draw_button_72\"), true);\n",
       "        } else {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_72\").innerHTML = \"Done.\";\n",
       "                document.getElementById(\"state_72\").style.color = \"blue\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_72\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_72\"), true);\n",
       "            change_button(document.getElementById(\"setup_button_72\"),  processingInstance.setup == undefined);\n",
       "            change_button(document.getElementById(\"draw_button_72\"), true);\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"canvas_div_72\").style.display = \"none\";\n",
       "        document.getElementById(\"controls_div_72\").style.display = \"none\";\n",
       "        if (!has_error) {\n",
       "            document.getElementById(\"state_72\").innerHTML = \"Error.\";\n",
       "            document.getElementById(\"state_72\").style.color = \"red\";\n",
       "        }\n",
       "        change_button(document.getElementById(\"run_button_72\"), true);\n",
       "        change_button(document.getElementById(\"pause_button_72\"), true);\n",
       "        change_button(document.getElementById(\"setup_button_72\"),  true);\n",
       "        change_button(document.getElementById(\"draw_button_72\"), true);\n",
       "    }\n",
       "});\n",
       "\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "----------------------------------\n",
      "    vertex(-49 + x, -65 + y);\n",
      "    vertex(-48 + x, -63 + y);\n",
      "    vertex(-46 + x, -62 + y);\n",
      "    vertex(-43 + x, -59 + y);\n",
      "    vertex(-40 + x, -58 + y);\n",
      "    vertex(-39 + x, -57 + y);\n",
      "    vertex(-38 + x, -55 + y);\n",
      "    vertex(-35 + x, -54 + y);\n",
      "    vertex(-34 + x, -53 + y);\n",
      "    vertex(-29 + x, -52 + y);\n",
      "    vertex(-23 + x, -50 + y);\n",
      "    vertex(24 + x, -52 + y);\n",
      "    vertex(31 + x, -53 + y);\n",
      "    vertex(40 + x, -54 + y);\n",
      "    vertex(41 + x, -55 + y);\n",
      "    vertex(44 + x, -58 + y);\n",
      "    vertex(45 + x, -59 + y);\n",
      "    vertex(49 + x, -60 + y);\n",
      "    vertex(50 + x, -62 + y);\n",
      "    vertex(51 + x, -64 + y);\n",
      "    vertex(52 + x, -65 + y);\n",
      "    vertex(54 + x, -67 + y);\n",
      "    vertex(56 + x, -68 + y);\n",
      "    vertex(57 + x, -69 + y);\n",
      "    vertex(59 + x, -70 + y);\n",
      "    vertex(61 + x, -72 + y);\n",
      "    vertex(62 + x, -73 + y);\n",
      "    vertex(64 + x, -75 + y);\n",
      "    vertex(65 + x, -77 + y);\n",
      "    vertex(67 + x, -78 + y);\n",
      "    vertex(72 + x, -77 + y);\n",
      "    vertex(74 + x, -74 + y);\n",
      "    vertex(75 + x, -73 + y);\n",
      "    vertex(76 + x, -70 + y);\n",
      "    vertex(81 + x, -65 + y);\n",
      "    vertex(82 + x, -64 + y);\n",
      "    vertex(84 + x, -58 + y);\n",
      "    vertex(85 + x, -55 + y);\n",
      "    vertex(86 + x, -54 + y);\n",
      "    vertex(90 + x, -48 + y);\n",
      "    vertex(91 + x, -45 + y);\n",
      "    vertex(92 + x, -43 + y);\n",
      "    vertex(94 + x, -42 + y);\n",
      "    vertex(95 + x, -40 + y);\n",
      "    vertex(96 + x, -39 + y);\n",
      "    vertex(95 + x, -37 + y);\n",
      "    vertex(87 + x, -35 + y);\n",
      "    vertex(84 + x, -34 + y);\n",
      "    vertex(77 + x, -33 + y);\n",
      "    vertex(72 + x, -32 + y);\n",
      "    vertex(70 + x, -30 + y);\n",
      "    vertex(67 + x, -29 + y);\n",
      "    vertex(66 + x, -28 + y);\n",
      "    vertex(65 + x, -27 + y);\n",
      "    vertex(57 + x, -28 + y);\n",
      "    vertex(51 + x, -29 + y);\n",
      "    vertex(50 + x, -30 + y);\n",
      "    vertex(49 + x, -32 + y);\n",
      "    vertex(47 + x, -33 + y);\n",
      "    vertex(46 + x, -34 + y);\n",
      "    vertex(45 + x, -35 + y);\n",
      "    vertex(44 + x, -34 + y);\n",
      "    vertex(42 + x, -30 + y);\n",
      "    vertex(41 + x, -29 + y);\n",
      "    vertex(40 + x, -27 + y);\n",
      "    vertex(39 + x, -23 + y);\n",
      "    vertex(37 + x, -20 + y);\n",
      "    vertex(36 + x, -18 + y);\n",
      "    vertex(37 + x, -9 + y);\n",
      "    vertex(39 + x, 2 + y);\n",
      "    vertex(41 + x, 3 + y);\n",
      "    vertex(42 + x, 13 + y);\n",
      "    vertex(44 + x, 27 + y);\n",
      "    vertex(45 + x, 40 + y);\n",
      "    vertex(44 + x, 57 + y);\n",
      "    vertex(31 + x, 56 + y);\n",
      "    vertex(-4 + x, 55 + y);\n",
      "    vertex(-33 + x, 56 + y);\n",
      "    vertex(-36 + x, 55 + y);\n",
      "    vertex(-38 + x, 51 + y);\n",
      "    vertex(-36 + x, 47 + y);\n",
      "    vertex(-35 + x, 41 + y);\n",
      "    vertex(-34 + x, 21 + y);\n",
      "    vertex(-33 + x, 17 + y);\n",
      "    vertex(-34 + x, 0 + y);\n",
      "    vertex(-35 + x, -24 + y);\n",
      "    vertex(-36 + x, -30 + y);\n",
      "    vertex(-38 + x, -34 + y);\n",
      "    vertex(-39 + x, -35 + y);\n",
      "    vertex(-41 + x, -32 + y);\n",
      "    vertex(-43 + x, -30 + y);\n",
      "    vertex(-44 + x, -28 + y);\n",
      "    vertex(-45 + x, -25 + y);\n",
      "    vertex(-46 + x, -24 + y);\n",
      "    vertex(-48 + x, -23 + y);\n",
      "    vertex(-51 + x, -19 + y);\n",
      "    vertex(-56 + x, -20 + y);\n",
      "    vertex(-59 + x, -22 + y);\n",
      "    vertex(-60 + x, -23 + y);\n",
      "    vertex(-74 + x, -24 + y);\n",
      "    vertex(-75 + x, -25 + y);\n",
      "    vertex(-78 + x, -27 + y);\n",
      "    vertex(-79 + x, -28 + y);\n",
      "    vertex(-78 + x, -35 + y);\n",
      "    vertex(-77 + x, -37 + y);\n",
      "    vertex(-75 + x, -39 + y);\n",
      "    vertex(-70 + x, -43 + y);\n",
      "    vertex(-69 + x, -44 + y);\n",
      "    vertex(-68 + x, -45 + y);\n",
      "    vertex(-67 + x, -48 + y);\n",
      "    vertex(-60 + x, -55 + y);\n",
      "    vertex(-58 + x, -58 + y);\n",
      "    vertex(-55 + x, -59 + y);\n",
      "    vertex(-52 + x, -64 + y);\n",
      "    vertex(-49 + x, -65 + y);\n",
      "    vertex(-48 + x, -68 + y);\n"
     ]
    }
   ],
   "source": [
    "void setup() {\n",
    "    size(500, 500);\n",
    "    fill(0);\n",
    "    ellipse(width/2, height/2, 5, 5);\n",
    "    println(\"----------------------------------\");\n",
    "}\n",
    "\n",
    "float last_x = 0;\n",
    "float last_y = 0;\n",
    "\n",
    "void mouseDragged() {\n",
    "    if (mouseX != last_x && mouseY != last_y) {\n",
    "        println(\"    vertex(\" + int(mouseX - width/2) + \" + x, \" \n",
    "                + int(mouseY - height/2) + \" + y);\");\n",
    "        rect(mouseX, mouseY, 5, 5);\n",
    "        last_x = mouseX;\n",
    "        last_y = mouseY;\n",
    "    }\n",
    "}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 119,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "        var component = document.getElementById(\"sketch_78\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"state_78\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"controls_div_78\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "            // FIXME: Stop all previously running versions (?)\n",
       "            var processingInstance = Processing.getInstanceById(\"canvas_78\");\n",
       "            if (processingInstance != undefined && processingInstance.isRunning())\n",
       "                processingInstance.noLoop();\n",
       "        });\n",
       "\n",
       "\n",
       "        var output_area = this;\n",
       "        // find my cell element\n",
       "        var cell_element = output_area.element.parents('.cell');\n",
       "        // which cell is it?\n",
       "        var cell_idx = Jupyter.notebook.get_cell_elements().index(cell_element);\n",
       "        // get the cell object\n",
       "        var cell = Jupyter.notebook.get_cell(cell_idx);\n",
       "\n",
       "        function jyp_print(cell, newline) {\n",
       "            return function(message) {\n",
       "                cell.get_callbacks().iopub.output({header: {\"msg_type\": \"stream\"},\n",
       "                                                   content: {text: message + newline,\n",
       "                                                             name: \"stdout\"}});\n",
       "            }\n",
       "        }\n",
       "        window.jyp_println = jyp_print(cell, \"\\n\");\n",
       "        window.jyp_print = jyp_print(cell, \"\");\n",
       "\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "           Processing.logger.println = jyp_print(cell, \"\\n\");\n",
       "           Processing.logger.print = jyp_print(cell, \"\");\n",
       "        });\n",
       "\n",
       "\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<div id=\"canvas_div_78\">\n",
       "  <b>Sketch #78:</b><br/>\n",
       "  <canvas id=\"canvas_78\"></canvas><br/>\n",
       "</div>\n",
       "<div id=\"controls_div_78\">\n",
       "  <button id=\"run_button_78\" onclick=\"startSketch('78');\">\n",
       "    <i class=\"fa fa-play-circle-o\" style=\"size: 2em;\"></i>\n",
       "        Run\n",
       "  </button>\n",
       "  <button id=\"pause_button_78\" onclick=\"pauseSketch('78');\">\n",
       "    <i class=\"fa fa-pause\" style=\"size: 2em;\"></i>\n",
       "        Pause\n",
       "  </button>\n",
       "  <button id=\"setup_button_78\" onclick=\"setupSketch('78');\">\n",
       "    setup()\n",
       "  </button>\n",
       "  <button id=\"draw_button_78\" onclick=\"drawSketch('78');\">\n",
       "    draw()\n",
       "  </button>\n",
       "</div>\n",
       "<b>Sketch #78 state:</b> <span id=\"state_78\">Loading...</span><br/>\n",
       "<script>\n",
       "\n",
       "function change_button(button, disable) {\n",
       "    button.disabled = disable;\n",
       "    if (disable) {\n",
       "        button.style.color = \"grey\";\n",
       "    } else {\n",
       "        button.style.color = \"black\";\n",
       "    }\n",
       "}\n",
       "\n",
       "function startSketch(id) {\n",
       "    switchSketchState(id, true);\n",
       "}\n",
       "\n",
       "function pauseSketch(id) {\n",
       "    switchSketchState(id, false);\n",
       "}\n",
       "\n",
       "function drawSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Drawing...\";\n",
       "            try {\n",
       "                processingInstance.redraw();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Drawing... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No drawing() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function setupSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.setup != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Setting up...\";\n",
       "            try {\n",
       "                processingInstance.setup();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Setting up... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No setup() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function switchSketchState(id, on) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (on) {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Running...\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"green\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id),  true);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), true);\n",
       "        processingInstance.loop();  // call Processing loop() function\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Paused.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "        processingInstance.noLoop(); // stop animation, call noLoop()\n",
       "    }\n",
       "}\n",
       "\n",
       "require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function () {\n",
       "    var processingCode = 'void drawThing(float x1, float y1, float angle) {\\n    pushMatrix();\\n    translate(x1, y1);\\n    rotate(angle);\\n    beginShape();\\n    int x = 0;\\n    int y = 0;\\n    vertex(-49 + x, -65 + y);\\n    vertex(-48 + x, -63 + y);\\n    vertex(-46 + x, -62 + y);\\n    vertex(-43 + x, -59 + y);\\n    vertex(-40 + x, -58 + y);\\n    vertex(-39 + x, -57 + y);\\n    vertex(-38 + x, -55 + y);\\n    vertex(-35 + x, -54 + y);\\n    vertex(-34 + x, -53 + y);\\n    vertex(-29 + x, -52 + y);\\n    vertex(-23 + x, -50 + y);\\n    vertex(24 + x, -52 + y);\\n    vertex(31 + x, -53 + y);\\n    vertex(40 + x, -54 + y);\\n    vertex(41 + x, -55 + y);\\n    vertex(44 + x, -58 + y);\\n    vertex(45 + x, -59 + y);\\n    vertex(49 + x, -60 + y);\\n    vertex(50 + x, -62 + y);\\n    vertex(51 + x, -64 + y);\\n    vertex(52 + x, -65 + y);\\n    vertex(54 + x, -67 + y);\\n    vertex(56 + x, -68 + y);\\n    vertex(57 + x, -69 + y);\\n    vertex(59 + x, -70 + y);\\n    vertex(61 + x, -72 + y);\\n    vertex(62 + x, -73 + y);\\n    vertex(64 + x, -75 + y);\\n    vertex(65 + x, -77 + y);\\n    vertex(67 + x, -78 + y);\\n    vertex(72 + x, -77 + y);\\n    vertex(74 + x, -74 + y);\\n    vertex(75 + x, -73 + y);\\n    vertex(76 + x, -70 + y);\\n    vertex(81 + x, -65 + y);\\n    vertex(82 + x, -64 + y);\\n    vertex(84 + x, -58 + y);\\n    vertex(85 + x, -55 + y);\\n    vertex(86 + x, -54 + y);\\n    vertex(90 + x, -48 + y);\\n    vertex(91 + x, -45 + y);\\n    vertex(92 + x, -43 + y);\\n    vertex(94 + x, -42 + y);\\n    vertex(95 + x, -40 + y);\\n    vertex(96 + x, -39 + y);\\n    vertex(95 + x, -37 + y);\\n    vertex(87 + x, -35 + y);\\n    vertex(84 + x, -34 + y);\\n    vertex(77 + x, -33 + y);\\n    vertex(72 + x, -32 + y);\\n    vertex(70 + x, -30 + y);\\n    vertex(67 + x, -29 + y);\\n    vertex(66 + x, -28 + y);\\n    vertex(65 + x, -27 + y);\\n    vertex(57 + x, -28 + y);\\n    vertex(51 + x, -29 + y);\\n    vertex(50 + x, -30 + y);\\n    vertex(49 + x, -32 + y);\\n    vertex(47 + x, -33 + y);\\n    vertex(46 + x, -34 + y);\\n    vertex(45 + x, -35 + y);\\n    vertex(44 + x, -34 + y);\\n    vertex(42 + x, -30 + y);\\n    vertex(41 + x, -29 + y);\\n    vertex(40 + x, -27 + y);\\n    vertex(39 + x, -23 + y);\\n    vertex(37 + x, -20 + y);\\n    vertex(36 + x, -18 + y);\\n    vertex(37 + x, -9 + y);\\n    vertex(39 + x, 2 + y);\\n    vertex(41 + x, 3 + y);\\n    vertex(42 + x, 13 + y);\\n    vertex(44 + x, 27 + y);\\n    vertex(45 + x, 40 + y);\\n    vertex(44 + x, 57 + y);\\n    vertex(31 + x, 56 + y);\\n    vertex(-4 + x, 55 + y);\\n    vertex(-33 + x, 56 + y);\\n    vertex(-36 + x, 55 + y);\\n    vertex(-38 + x, 51 + y);\\n    vertex(-36 + x, 47 + y);\\n    vertex(-35 + x, 41 + y);\\n    vertex(-34 + x, 21 + y);\\n    vertex(-33 + x, 17 + y);\\n    vertex(-34 + x, 0 + y);\\n    vertex(-35 + x, -24 + y);\\n    vertex(-36 + x, -30 + y);\\n    vertex(-38 + x, -34 + y);\\n    vertex(-39 + x, -35 + y);\\n    vertex(-41 + x, -32 + y);\\n    vertex(-43 + x, -30 + y);\\n    vertex(-44 + x, -28 + y);\\n    vertex(-45 + x, -25 + y);\\n    vertex(-46 + x, -24 + y);\\n    vertex(-48 + x, -23 + y);\\n    vertex(-51 + x, -19 + y);\\n    vertex(-56 + x, -20 + y);\\n    vertex(-59 + x, -22 + y);\\n    vertex(-60 + x, -23 + y);\\n    vertex(-74 + x, -24 + y);\\n    vertex(-75 + x, -25 + y);\\n    vertex(-78 + x, -27 + y);\\n    vertex(-79 + x, -28 + y);\\n    vertex(-78 + x, -35 + y);\\n    vertex(-77 + x, -37 + y);\\n    vertex(-75 + x, -39 + y);\\n    vertex(-70 + x, -43 + y);\\n    vertex(-69 + x, -44 + y);\\n    vertex(-68 + x, -45 + y);\\n    vertex(-67 + x, -48 + y);\\n    vertex(-60 + x, -55 + y);\\n    vertex(-58 + x, -58 + y);\\n    vertex(-55 + x, -59 + y);\\n    vertex(-52 + x, -64 + y);\\n    vertex(-49 + x, -65 + y);\\n    vertex(-48 + x, -68 + y);\\n    endShape();\\n    popMatrix();\\n}\\n\\nvoid setup() {\\n    size(500, 500);\\n}\\n\\nvoid draw() {\\n    fill(128, 34, 200);\\n    drawThing(250, 250, PI/4);\\n    fill(22, 88, 200);\\n    drawThing(100, 100, PI/2);\\n    fill(56, 100, 100);\\n    drawThing(300, 300, PI);\\n}';\n",
       "    var cc;\n",
       "    var processingInstance;\n",
       "    var has_error = false;\n",
       "\n",
       "    try {\n",
       "        cc = Processing.compile(processingCode);\n",
       "    } catch (e) {\n",
       "        console.log(e);\n",
       "        cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "        document.getElementById(\"state_78\").innerHTML = e.toString();\n",
       "        document.getElementById(\"state_78\").style.color = \"red\";\n",
       "        has_error = true;\n",
       "    }\n",
       "    if (cc != undefined) {\n",
       "        try {\n",
       "            processingInstance = new Processing(\"canvas_78\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "        } catch (e) {\n",
       "            console.log(e);\n",
       "            cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "            document.getElementById(\"state_78\").innerHTML = e.toString();\n",
       "            document.getElementById(\"state_78\").style.color = \"red\";\n",
       "            processingInstance = new Processing(\"canvas_78\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "            has_error = true;\n",
       "        }\n",
       "    }\n",
       "    if (processingInstance != undefined) {\n",
       "        setTimeout(function () {\n",
       "            // Canvas:\n",
       "            if (processingInstance.externals.context === undefined) {\n",
       "                document.getElementById(\"canvas_div_78\").style.display = \"none\";\n",
       "            }\n",
       "        }, 100);\n",
       "        // Controls:\n",
       "        if (!(processingInstance.isRunning() && processingInstance.draw != undefined)) {\n",
       "            document.getElementById(\"controls_div_78\").style.display = \"none\";\n",
       "        }\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_78\").innerHTML = \"Running...\";\n",
       "                document.getElementById(\"state_78\").style.color = \"green\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_78\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_78\"), false);\n",
       "            change_button(document.getElementById(\"setup_button_78\"),  true);\n",
       "            change_button(document.getElementById(\"draw_button_78\"), true);\n",
       "        } else {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_78\").innerHTML = \"Done.\";\n",
       "                document.getElementById(\"state_78\").style.color = \"blue\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_78\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_78\"), true);\n",
       "            change_button(document.getElementById(\"setup_button_78\"),  processingInstance.setup == undefined);\n",
       "            change_button(document.getElementById(\"draw_button_78\"), true);\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"canvas_div_78\").style.display = \"none\";\n",
       "        document.getElementById(\"controls_div_78\").style.display = \"none\";\n",
       "        if (!has_error) {\n",
       "            document.getElementById(\"state_78\").innerHTML = \"Error.\";\n",
       "            document.getElementById(\"state_78\").style.color = \"red\";\n",
       "        }\n",
       "        change_button(document.getElementById(\"run_button_78\"), true);\n",
       "        change_button(document.getElementById(\"pause_button_78\"), true);\n",
       "        change_button(document.getElementById(\"setup_button_78\"),  true);\n",
       "        change_button(document.getElementById(\"draw_button_78\"), true);\n",
       "    }\n",
       "});\n",
       "\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "void drawThing(float x1, float y1, float angle) {\n",
    "    pushMatrix();\n",
    "    translate(x1, y1);\n",
    "    rotate(angle);\n",
    "    beginShape();\n",
    "    int x = 0;\n",
    "    int y = 0;\n",
    "    vertex(-49 + x, -65 + y);\n",
    "    vertex(-48 + x, -63 + y);\n",
    "    vertex(-46 + x, -62 + y);\n",
    "    vertex(-43 + x, -59 + y);\n",
    "    vertex(-40 + x, -58 + y);\n",
    "    vertex(-39 + x, -57 + y);\n",
    "    vertex(-38 + x, -55 + y);\n",
    "    vertex(-35 + x, -54 + y);\n",
    "    vertex(-34 + x, -53 + y);\n",
    "    vertex(-29 + x, -52 + y);\n",
    "    vertex(-23 + x, -50 + y);\n",
    "    vertex(24 + x, -52 + y);\n",
    "    vertex(31 + x, -53 + y);\n",
    "    vertex(40 + x, -54 + y);\n",
    "    vertex(41 + x, -55 + y);\n",
    "    vertex(44 + x, -58 + y);\n",
    "    vertex(45 + x, -59 + y);\n",
    "    vertex(49 + x, -60 + y);\n",
    "    vertex(50 + x, -62 + y);\n",
    "    vertex(51 + x, -64 + y);\n",
    "    vertex(52 + x, -65 + y);\n",
    "    vertex(54 + x, -67 + y);\n",
    "    vertex(56 + x, -68 + y);\n",
    "    vertex(57 + x, -69 + y);\n",
    "    vertex(59 + x, -70 + y);\n",
    "    vertex(61 + x, -72 + y);\n",
    "    vertex(62 + x, -73 + y);\n",
    "    vertex(64 + x, -75 + y);\n",
    "    vertex(65 + x, -77 + y);\n",
    "    vertex(67 + x, -78 + y);\n",
    "    vertex(72 + x, -77 + y);\n",
    "    vertex(74 + x, -74 + y);\n",
    "    vertex(75 + x, -73 + y);\n",
    "    vertex(76 + x, -70 + y);\n",
    "    vertex(81 + x, -65 + y);\n",
    "    vertex(82 + x, -64 + y);\n",
    "    vertex(84 + x, -58 + y);\n",
    "    vertex(85 + x, -55 + y);\n",
    "    vertex(86 + x, -54 + y);\n",
    "    vertex(90 + x, -48 + y);\n",
    "    vertex(91 + x, -45 + y);\n",
    "    vertex(92 + x, -43 + y);\n",
    "    vertex(94 + x, -42 + y);\n",
    "    vertex(95 + x, -40 + y);\n",
    "    vertex(96 + x, -39 + y);\n",
    "    vertex(95 + x, -37 + y);\n",
    "    vertex(87 + x, -35 + y);\n",
    "    vertex(84 + x, -34 + y);\n",
    "    vertex(77 + x, -33 + y);\n",
    "    vertex(72 + x, -32 + y);\n",
    "    vertex(70 + x, -30 + y);\n",
    "    vertex(67 + x, -29 + y);\n",
    "    vertex(66 + x, -28 + y);\n",
    "    vertex(65 + x, -27 + y);\n",
    "    vertex(57 + x, -28 + y);\n",
    "    vertex(51 + x, -29 + y);\n",
    "    vertex(50 + x, -30 + y);\n",
    "    vertex(49 + x, -32 + y);\n",
    "    vertex(47 + x, -33 + y);\n",
    "    vertex(46 + x, -34 + y);\n",
    "    vertex(45 + x, -35 + y);\n",
    "    vertex(44 + x, -34 + y);\n",
    "    vertex(42 + x, -30 + y);\n",
    "    vertex(41 + x, -29 + y);\n",
    "    vertex(40 + x, -27 + y);\n",
    "    vertex(39 + x, -23 + y);\n",
    "    vertex(37 + x, -20 + y);\n",
    "    vertex(36 + x, -18 + y);\n",
    "    vertex(37 + x, -9 + y);\n",
    "    vertex(39 + x, 2 + y);\n",
    "    vertex(41 + x, 3 + y);\n",
    "    vertex(42 + x, 13 + y);\n",
    "    vertex(44 + x, 27 + y);\n",
    "    vertex(45 + x, 40 + y);\n",
    "    vertex(44 + x, 57 + y);\n",
    "    vertex(31 + x, 56 + y);\n",
    "    vertex(-4 + x, 55 + y);\n",
    "    vertex(-33 + x, 56 + y);\n",
    "    vertex(-36 + x, 55 + y);\n",
    "    vertex(-38 + x, 51 + y);\n",
    "    vertex(-36 + x, 47 + y);\n",
    "    vertex(-35 + x, 41 + y);\n",
    "    vertex(-34 + x, 21 + y);\n",
    "    vertex(-33 + x, 17 + y);\n",
    "    vertex(-34 + x, 0 + y);\n",
    "    vertex(-35 + x, -24 + y);\n",
    "    vertex(-36 + x, -30 + y);\n",
    "    vertex(-38 + x, -34 + y);\n",
    "    vertex(-39 + x, -35 + y);\n",
    "    vertex(-41 + x, -32 + y);\n",
    "    vertex(-43 + x, -30 + y);\n",
    "    vertex(-44 + x, -28 + y);\n",
    "    vertex(-45 + x, -25 + y);\n",
    "    vertex(-46 + x, -24 + y);\n",
    "    vertex(-48 + x, -23 + y);\n",
    "    vertex(-51 + x, -19 + y);\n",
    "    vertex(-56 + x, -20 + y);\n",
    "    vertex(-59 + x, -22 + y);\n",
    "    vertex(-60 + x, -23 + y);\n",
    "    vertex(-74 + x, -24 + y);\n",
    "    vertex(-75 + x, -25 + y);\n",
    "    vertex(-78 + x, -27 + y);\n",
    "    vertex(-79 + x, -28 + y);\n",
    "    vertex(-78 + x, -35 + y);\n",
    "    vertex(-77 + x, -37 + y);\n",
    "    vertex(-75 + x, -39 + y);\n",
    "    vertex(-70 + x, -43 + y);\n",
    "    vertex(-69 + x, -44 + y);\n",
    "    vertex(-68 + x, -45 + y);\n",
    "    vertex(-67 + x, -48 + y);\n",
    "    vertex(-60 + x, -55 + y);\n",
    "    vertex(-58 + x, -58 + y);\n",
    "    vertex(-55 + x, -59 + y);\n",
    "    vertex(-52 + x, -64 + y);\n",
    "    vertex(-49 + x, -65 + y);\n",
    "    vertex(-48 + x, -68 + y);\n",
    "    endShape();\n",
    "    popMatrix();\n",
    "}\n",
    "\n",
    "void setup() {\n",
    "    size(500, 500);\n",
    "}\n",
    "\n",
    "void draw() {\n",
    "    fill(128, 34, 200);\n",
    "    drawThing(250, 250, PI/4);\n",
    "    fill(22, 88, 200);\n",
    "    drawThing(100, 100, PI/2);\n",
    "    fill(56, 100, 100);\n",
    "    drawThing(300, 300, PI);\n",
    "}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 136,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "        var component = document.getElementById(\"sketch_90\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"state_90\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"controls_div_90\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "            // FIXME: Stop all previously running versions (?)\n",
       "            var processingInstance = Processing.getInstanceById(\"canvas_90\");\n",
       "            if (processingInstance != undefined && processingInstance.isRunning())\n",
       "                processingInstance.noLoop();\n",
       "        });\n",
       "\n",
       "\n",
       "        var output_area = this;\n",
       "        // find my cell element\n",
       "        var cell_element = output_area.element.parents('.cell');\n",
       "        // which cell is it?\n",
       "        var cell_idx = Jupyter.notebook.get_cell_elements().index(cell_element);\n",
       "        // get the cell object\n",
       "        var cell = Jupyter.notebook.get_cell(cell_idx);\n",
       "\n",
       "        function jyp_print(cell, newline) {\n",
       "            return function(message) {\n",
       "                cell.get_callbacks().iopub.output({header: {\"msg_type\": \"stream\"},\n",
       "                                                   content: {text: message + newline,\n",
       "                                                             name: \"stdout\"}});\n",
       "            }\n",
       "        }\n",
       "        window.jyp_println = jyp_print(cell, \"\\n\");\n",
       "        window.jyp_print = jyp_print(cell, \"\");\n",
       "\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "           Processing.logger.println = jyp_print(cell, \"\\n\");\n",
       "           Processing.logger.print = jyp_print(cell, \"\");\n",
       "        });\n",
       "\n",
       "\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<div id=\"canvas_div_90\">\n",
       "  <b>Sketch #90:</b><br/>\n",
       "  <canvas id=\"canvas_90\"></canvas><br/>\n",
       "</div>\n",
       "<div id=\"controls_div_90\">\n",
       "  <button id=\"run_button_90\" onclick=\"startSketch('90');\">\n",
       "    <i class=\"fa fa-play-circle-o\" style=\"size: 2em;\"></i>\n",
       "        Run\n",
       "  </button>\n",
       "  <button id=\"pause_button_90\" onclick=\"pauseSketch('90');\">\n",
       "    <i class=\"fa fa-pause\" style=\"size: 2em;\"></i>\n",
       "        Pause\n",
       "  </button>\n",
       "  <button id=\"setup_button_90\" onclick=\"setupSketch('90');\">\n",
       "    setup()\n",
       "  </button>\n",
       "  <button id=\"draw_button_90\" onclick=\"drawSketch('90');\">\n",
       "    draw()\n",
       "  </button>\n",
       "</div>\n",
       "<b>Sketch #90 state:</b> <span id=\"state_90\">Loading...</span><br/>\n",
       "<script>\n",
       "\n",
       "function change_button(button, disable) {\n",
       "    button.disabled = disable;\n",
       "    if (disable) {\n",
       "        button.style.color = \"grey\";\n",
       "    } else {\n",
       "        button.style.color = \"black\";\n",
       "    }\n",
       "}\n",
       "\n",
       "function startSketch(id) {\n",
       "    switchSketchState(id, true);\n",
       "}\n",
       "\n",
       "function pauseSketch(id) {\n",
       "    switchSketchState(id, false);\n",
       "}\n",
       "\n",
       "function drawSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Drawing...\";\n",
       "            try {\n",
       "                processingInstance.redraw();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Drawing... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No drawing() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function setupSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.setup != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Setting up...\";\n",
       "            try {\n",
       "                processingInstance.setup();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Setting up... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No setup() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function switchSketchState(id, on) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (on) {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Running...\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"green\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id),  true);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), true);\n",
       "        processingInstance.loop();  // call Processing loop() function\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Paused.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "        processingInstance.noLoop(); // stop animation, call noLoop()\n",
       "    }\n",
       "}\n",
       "\n",
       "require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function () {\n",
       "    var processingCode = '//%%processing\\n\\nfloat angle1 = 0;\\n\\nvoid drawPerson(float x1, float y1, float angle) {\\n    pushMatrix();\\n    translate(x1, y1);\\n    rotate(angle);\\n    scale(.5);\\n    fill(128, 0, 56);\\n    beginShape();\\n    float x = 0;\\n    float y = 0;\\n    vertex(-30 + x, -38.111092331968166 + y);\\n    vertex(-29 + x, -35.111092331968166 + y);\\n    vertex(-28 + x, -32.111092331968166 + y);\\n    vertex(-26 + x, -31.111092331968166 + y);\\n    vertex(-25 + x, -30.111092331968166 + y);\\n    vertex(-23 + x, -29.111092331968166 + y);\\n    vertex(-21 + x, -28.111092331968166 + y);\\n    vertex(-19 + x, -27.111092331968166 + y);\\n    vertex(-15 + x, -26.111092331968166 + y);\\n    vertex(-11 + x, -25.111092331968166 + y);\\n    vertex(-9 + x, -23.111092331968166 + y);\\n    vertex(-3 + x, -22.111092331968166 + y);\\n    vertex(-1 + x, -21.111092331968166 + y);\\n    vertex(8 + x, -22.111092331968166 + y);\\n    vertex(11 + x, -23.111092331968166 + y);\\n    vertex(12 + x, -25.111092331968166 + y);\\n    vertex(18 + x, -26.111092331968166 + y);\\n    vertex(20 + x, -27.111092331968166 + y);\\n    vertex(22 + x, -28.111092331968166 + y);\\n    vertex(25 + x, -30.111092331968166 + y);\\n    vertex(26 + x, -31.111092331968166 + y);\\n    vertex(27 + x, -32.111092331968166 + y);\\n    vertex(29 + x, -33.111092331968166 + y);\\n    vertex(30 + x, -35.111092331968166 + y);\\n    vertex(31 + x, -38.111092331968166 + y);\\n    vertex(32 + x, -39.111092331968166 + y);\\n    vertex(34 + x, -40.111092331968166 + y);\\n    vertex(35 + x, -39.111092331968166 + y);\\n    vertex(58 + x, -38.111092331968166 + y);\\n    vertex(59 + x, -37.111092331968166 + y);\\n    vertex(65 + x, -36.111092331968166 + y);\\n    vertex(68 + x, -35.111092331968166 + y);\\n    vertex(70 + x, -33.111092331968166 + y);\\n    vertex(72 + x, -32.111092331968166 + y);\\n    vertex(74 + x, -30.111092331968166 + y);\\n    vertex(77 + x, -29.111092331968166 + y);\\n    vertex(78 + x, -28.111092331968166 + y);\\n    vertex(80 + x, -26.111092331968166 + y);\\n    vertex(82 + x, -25.111092331968166 + y);\\n    vertex(84 + x, -23.111092331968166 + y);\\n    vertex(86 + x, -22.111092331968166 + y);\\n    vertex(87 + x, -21.111092331968166 + y);\\n    vertex(88 + x, -20.111092331968166 + y);\\n    vertex(89 + x, -19.111092331968166 + y);\\n    vertex(91 + x, -18.111092331968166 + y);\\n    vertex(94 + x, -17.111092331968166 + y);\\n    vertex(96 + x, -15.111092331968166 + y);\\n    vertex(97 + x, -12.111092331968166 + y);\\n    vertex(98 + x, -11.111092331968166 + y);\\n    vertex(100 + x, -10.111092331968166 + y);\\n    vertex(101 + x, -9.111092331968166 + y);\\n    vertex(98 + x, -8.111092331968166 + y);\\n    vertex(97 + x, -7.111092331968166 + y);\\n    vertex(96 + x, -6.111092331968166 + y);\\n    vertex(94 + x, -5.111092331968166 + y);\\n    vertex(91 + x, -3.111092331968166 + y);\\n    vertex(89 + x, -2.111092331968166 + y);\\n    vertex(88 + x, -1.111092331968166 + y);\\n    vertex(85 + x, 0.888907668031834 + y);\\n    vertex(82 + x, 2.888907668031834 + y);\\n    vertex(80 + x, 3.888907668031834 + y);\\n    vertex(77 + x, 2.888907668031834 + y);\\n    vertex(75 + x, 1.888907668031834 + y);\\n    vertex(70 + x, 0.888907668031834 + y);\\n    vertex(66 + x, -0.11109233196816604 + y);\\n    vertex(64 + x, -1.111092331968166 + y);\\n    vertex(60 + x, -2.111092331968166 + y);\\n    vertex(58 + x, -3.111092331968166 + y);\\n    vertex(57 + x, -5.111092331968166 + y);\\n    vertex(55 + x, -6.111092331968166 + y);\\n    vertex(54 + x, -7.111092331968166 + y);\\n    vertex(51 + x, -9.111092331968166 + y);\\n    vertex(50 + x, -10.111092331968166 + y);\\n    vertex(49 + x, -3.111092331968166 + y);\\n    vertex(48 + x, -2.111092331968166 + y);\\n    vertex(47 + x, -1.111092331968166 + y);\\n    vertex(46 + x, 0.888907668031834 + y);\\n    vertex(45 + x, 1.888907668031834 + y);\\n    vertex(44 + x, 3.888907668031834 + y);\\n    vertex(42 + x, 8.888907668031834 + y);\\n    vertex(41 + x, 12.888907668031834 + y);\\n    vertex(40 + x, 18.888907668031834 + y);\\n    vertex(39 + x, 22.888907668031834 + y);\\n    vertex(38 + x, 27.888907668031834 + y);\\n    vertex(37 + x, 31.888907668031834 + y);\\n    vertex(36 + x, 36.888907668031834 + y);\\n    vertex(35 + x, 39.888907668031834 + y);\\n    vertex(34 + x, 41.888907668031834 + y);\\n    vertex(32 + x, 40.888907668031834 + y);\\n    vertex(-11 + x, 41.888907668031834 + y);\\n    vertex(-13 + x, 42.888907668031834 + y);\\n    vertex(-15 + x, 41.888907668031834 + y);\\n    vertex(-14 + x, 40.888907668031834 + y);\\n    vertex(-13 + x, 38.888907668031834 + y);\\n    vertex(-14 + x, 20.888907668031834 + y);\\n    vertex(-15 + x, 18.888907668031834 + y);\\n    vertex(-18 + x, 13.888907668031834 + y);\\n    vertex(-19 + x, 10.888907668031834 + y);\\n    vertex(-20 + x, 7.888907668031834 + y);\\n    vertex(-21 + x, 6.888907668031834 + y);\\n    vertex(-22 + x, 4.888907668031834 + y);\\n    vertex(-23 + x, 2.888907668031834 + y);\\n    vertex(-24 + x, 1.888907668031834 + y);\\n    vertex(-25 + x, -0.11109233196816604 + y);\\n    vertex(-26 + x, -2.111092331968166 + y);\\n    vertex(-28 + x, -3.111092331968166 + y);\\n    vertex(-29 + x, -5.111092331968166 + y);\\n    vertex(-30 + x, -6.111092331968166 + y);\\n    vertex(-31 + x, -7.111092331968166 + y);\\n    vertex(-32 + x, -6.111092331968166 + y);\\n    vertex(-33 + x, -3.111092331968166 + y);\\n    vertex(-34 + x, -2.111092331968166 + y);\\n    vertex(-36 + x, -1.111092331968166 + y);\\n    vertex(-38 + x, -0.11109233196816604 + y);\\n    vertex(-39 + x, 0.888907668031834 + y);\\n    vertex(-44 + x, 3.888907668031834 + y);\\n    vertex(-48 + x, 4.888907668031834 + y);\\n    vertex(-51 + x, 7.888907668031834 + y);\\n    vertex(-52 + x, 9.888907668031834 + y);\\n    vertex(-53 + x, 11.888907668031834 + y);\\n    vertex(-55 + x, 12.888907668031834 + y);\\n    vertex(-56 + x, 9.888907668031834 + y);\\n    vertex(-58 + x, 7.888907668031834 + y);\\n    vertex(-59 + x, 4.888907668031834 + y);\\n    vertex(-60 + x, 3.888907668031834 + y);\\n    vertex(-63 + x, 1.888907668031834 + y);\\n    vertex(-65 + x, -0.11109233196816604 + y);\\n    vertex(-68 + x, -2.111092331968166 + y);\\n    vertex(-69 + x, -5.111092331968166 + y);\\n    vertex(-70 + x, -6.111092331968166 + y);\\n    vertex(-72 + x, -7.111092331968166 + y);\\n    vertex(-73 + x, -9.111092331968166 + y);\\n    vertex(-74 + x, -10.111092331968166 + y);\\n    vertex(-75 + x, -11.111092331968166 + y);\\n    vertex(-76 + x, -12.111092331968166 + y);\\n    vertex(-75 + x, -13.111092331968166 + y);\\n    vertex(-74 + x, -17.111092331968166 + y);\\n    vertex(-73 + x, -19.111092331968166 + y);\\n    vertex(-72 + x, -20.111092331968166 + y);\\n    vertex(-71 + x, -22.111092331968166 + y);\\n    vertex(-69 + x, -23.111092331968166 + y);\\n    vertex(-68 + x, -25.111092331968166 + y);\\n    vertex(-65 + x, -27.111092331968166 + y);\\n    vertex(-63 + x, -28.111092331968166 + y);\\n    vertex(-61 + x, -29.111092331968166 + y);\\n    vertex(-59 + x, -32.111092331968166 + y);\\n    vertex(-58 + x, -33.111092331968166 + y);\\n    vertex(-56 + x, -35.111092331968166 + y);\\n    vertex(-55 + x, -37.111092331968166 + y);\\n    vertex(-54 + x, -38.111092331968166 + y);\\n    vertex(-53 + x, -37.111092331968166 + y);\\n    vertex(-48 + x, -38.111092331968166 + y);\\n    vertex(-46 + x, -39.111092331968166 + y);\\n    vertex(-40 + x, -40.111092331968166 + y);\\n    vertex(-31 + x, -39.111092331968166 + y);\\n    vertex(-30 + x, -38.111092331968166 + y);\\n    vertex(-26 + x, -37.111092331968166 + y);\\n    endShape();\\n    fill(0);\\n    beginShape();\\n    // paste pants here!\\n    endShape();\\n    popMatrix();\\n}\\n\\nfloat[] angles = new float[25];\\n\\nvoid setup() {\\n    size(500, 500);\\n    angles[0] = .1;\\n    angles[1] = .2;\\n    angles[2] = .3;\\n    angles[3] = .4;\\n    angles[4] = .5;\\n    angles[5] = .6;\\n    angles[6] = .7;\\n    angles[7] = .8;\\n    angles[8] = .9;\\n    angles[9] = 1.0;\\n    angles[10] = 1.1;\\n    angles[11] = 1.2;\\n    angles[12] = 1.2;\\n    angles[13] = 1.2;\\n    angles[14] = 1.3;\\n    angles[15] = 1.4;\\n    angles[16] = 1.5;\\n    angles[17] = 1.6;\\n    angles[18] = 1.7;\\n    angles[19] = 1.8;\\n    angles[20] = 1.9;\\n    angles[21] = 1.9;\\n    angles[22] = 1.10;\\n    angles[23] = 1.11;\\n    angles[24] = 1.12;\\n}\\n\\nvoid draw() {\\n    background(255);\\n    int a = 0;\\n    for (int i=0; i <5; i++) {\\n        for (int j=0; j < 5; j++) {\\n            drawPerson(50 + i * 100, 50 + j * 100, random(3));\\n            angles[a] = angles[a] + .5;\\n            a++;\\n        }\\n    }\\n    angle1 += PI/180 * 20;\\n    //delay(1);\\n}\\n\\n';\n",
       "    var cc;\n",
       "    var processingInstance;\n",
       "    var has_error = false;\n",
       "\n",
       "    try {\n",
       "        cc = Processing.compile(processingCode);\n",
       "    } catch (e) {\n",
       "        console.log(e);\n",
       "        cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "        document.getElementById(\"state_90\").innerHTML = e.toString();\n",
       "        document.getElementById(\"state_90\").style.color = \"red\";\n",
       "        has_error = true;\n",
       "    }\n",
       "    if (cc != undefined) {\n",
       "        try {\n",
       "            processingInstance = new Processing(\"canvas_90\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "        } catch (e) {\n",
       "            console.log(e);\n",
       "            cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "            document.getElementById(\"state_90\").innerHTML = e.toString();\n",
       "            document.getElementById(\"state_90\").style.color = \"red\";\n",
       "            processingInstance = new Processing(\"canvas_90\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "            has_error = true;\n",
       "        }\n",
       "    }\n",
       "    if (processingInstance != undefined) {\n",
       "        setTimeout(function () {\n",
       "            // Canvas:\n",
       "            if (processingInstance.externals.context === undefined) {\n",
       "                document.getElementById(\"canvas_div_90\").style.display = \"none\";\n",
       "            }\n",
       "        }, 100);\n",
       "        // Controls:\n",
       "        if (!(processingInstance.isRunning() && processingInstance.draw != undefined)) {\n",
       "            document.getElementById(\"controls_div_90\").style.display = \"none\";\n",
       "        }\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_90\").innerHTML = \"Running...\";\n",
       "                document.getElementById(\"state_90\").style.color = \"green\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_90\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_90\"), false);\n",
       "            change_button(document.getElementById(\"setup_button_90\"),  true);\n",
       "            change_button(document.getElementById(\"draw_button_90\"), true);\n",
       "        } else {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_90\").innerHTML = \"Done.\";\n",
       "                document.getElementById(\"state_90\").style.color = \"blue\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_90\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_90\"), true);\n",
       "            change_button(document.getElementById(\"setup_button_90\"),  processingInstance.setup == undefined);\n",
       "            change_button(document.getElementById(\"draw_button_90\"), true);\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"canvas_div_90\").style.display = \"none\";\n",
       "        document.getElementById(\"controls_div_90\").style.display = \"none\";\n",
       "        if (!has_error) {\n",
       "            document.getElementById(\"state_90\").innerHTML = \"Error.\";\n",
       "            document.getElementById(\"state_90\").style.color = \"red\";\n",
       "        }\n",
       "        change_button(document.getElementById(\"run_button_90\"), true);\n",
       "        change_button(document.getElementById(\"pause_button_90\"), true);\n",
       "        change_button(document.getElementById(\"setup_button_90\"),  true);\n",
       "        change_button(document.getElementById(\"draw_button_90\"), true);\n",
       "    }\n",
       "});\n",
       "\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "//%%processing\n",
    "\n",
    "float angle1 = 0;\n",
    "\n",
    "void drawPerson(float x1, float y1, float angle) {\n",
    "    pushMatrix();\n",
    "    translate(x1, y1);\n",
    "    rotate(angle);\n",
    "    scale(.5);\n",
    "    fill(128, 0, 56);\n",
    "    beginShape();\n",
    "    float x = 0;\n",
    "    float y = 0;\n",
    "    vertex(-30 + x, -38.111092331968166 + y);\n",
    "    vertex(-29 + x, -35.111092331968166 + y);\n",
    "    vertex(-28 + x, -32.111092331968166 + y);\n",
    "    vertex(-26 + x, -31.111092331968166 + y);\n",
    "    vertex(-25 + x, -30.111092331968166 + y);\n",
    "    vertex(-23 + x, -29.111092331968166 + y);\n",
    "    vertex(-21 + x, -28.111092331968166 + y);\n",
    "    vertex(-19 + x, -27.111092331968166 + y);\n",
    "    vertex(-15 + x, -26.111092331968166 + y);\n",
    "    vertex(-11 + x, -25.111092331968166 + y);\n",
    "    vertex(-9 + x, -23.111092331968166 + y);\n",
    "    vertex(-3 + x, -22.111092331968166 + y);\n",
    "    vertex(-1 + x, -21.111092331968166 + y);\n",
    "    vertex(8 + x, -22.111092331968166 + y);\n",
    "    vertex(11 + x, -23.111092331968166 + y);\n",
    "    vertex(12 + x, -25.111092331968166 + y);\n",
    "    vertex(18 + x, -26.111092331968166 + y);\n",
    "    vertex(20 + x, -27.111092331968166 + y);\n",
    "    vertex(22 + x, -28.111092331968166 + y);\n",
    "    vertex(25 + x, -30.111092331968166 + y);\n",
    "    vertex(26 + x, -31.111092331968166 + y);\n",
    "    vertex(27 + x, -32.111092331968166 + y);\n",
    "    vertex(29 + x, -33.111092331968166 + y);\n",
    "    vertex(30 + x, -35.111092331968166 + y);\n",
    "    vertex(31 + x, -38.111092331968166 + y);\n",
    "    vertex(32 + x, -39.111092331968166 + y);\n",
    "    vertex(34 + x, -40.111092331968166 + y);\n",
    "    vertex(35 + x, -39.111092331968166 + y);\n",
    "    vertex(58 + x, -38.111092331968166 + y);\n",
    "    vertex(59 + x, -37.111092331968166 + y);\n",
    "    vertex(65 + x, -36.111092331968166 + y);\n",
    "    vertex(68 + x, -35.111092331968166 + y);\n",
    "    vertex(70 + x, -33.111092331968166 + y);\n",
    "    vertex(72 + x, -32.111092331968166 + y);\n",
    "    vertex(74 + x, -30.111092331968166 + y);\n",
    "    vertex(77 + x, -29.111092331968166 + y);\n",
    "    vertex(78 + x, -28.111092331968166 + y);\n",
    "    vertex(80 + x, -26.111092331968166 + y);\n",
    "    vertex(82 + x, -25.111092331968166 + y);\n",
    "    vertex(84 + x, -23.111092331968166 + y);\n",
    "    vertex(86 + x, -22.111092331968166 + y);\n",
    "    vertex(87 + x, -21.111092331968166 + y);\n",
    "    vertex(88 + x, -20.111092331968166 + y);\n",
    "    vertex(89 + x, -19.111092331968166 + y);\n",
    "    vertex(91 + x, -18.111092331968166 + y);\n",
    "    vertex(94 + x, -17.111092331968166 + y);\n",
    "    vertex(96 + x, -15.111092331968166 + y);\n",
    "    vertex(97 + x, -12.111092331968166 + y);\n",
    "    vertex(98 + x, -11.111092331968166 + y);\n",
    "    vertex(100 + x, -10.111092331968166 + y);\n",
    "    vertex(101 + x, -9.111092331968166 + y);\n",
    "    vertex(98 + x, -8.111092331968166 + y);\n",
    "    vertex(97 + x, -7.111092331968166 + y);\n",
    "    vertex(96 + x, -6.111092331968166 + y);\n",
    "    vertex(94 + x, -5.111092331968166 + y);\n",
    "    vertex(91 + x, -3.111092331968166 + y);\n",
    "    vertex(89 + x, -2.111092331968166 + y);\n",
    "    vertex(88 + x, -1.111092331968166 + y);\n",
    "    vertex(85 + x, 0.888907668031834 + y);\n",
    "    vertex(82 + x, 2.888907668031834 + y);\n",
    "    vertex(80 + x, 3.888907668031834 + y);\n",
    "    vertex(77 + x, 2.888907668031834 + y);\n",
    "    vertex(75 + x, 1.888907668031834 + y);\n",
    "    vertex(70 + x, 0.888907668031834 + y);\n",
    "    vertex(66 + x, -0.11109233196816604 + y);\n",
    "    vertex(64 + x, -1.111092331968166 + y);\n",
    "    vertex(60 + x, -2.111092331968166 + y);\n",
    "    vertex(58 + x, -3.111092331968166 + y);\n",
    "    vertex(57 + x, -5.111092331968166 + y);\n",
    "    vertex(55 + x, -6.111092331968166 + y);\n",
    "    vertex(54 + x, -7.111092331968166 + y);\n",
    "    vertex(51 + x, -9.111092331968166 + y);\n",
    "    vertex(50 + x, -10.111092331968166 + y);\n",
    "    vertex(49 + x, -3.111092331968166 + y);\n",
    "    vertex(48 + x, -2.111092331968166 + y);\n",
    "    vertex(47 + x, -1.111092331968166 + y);\n",
    "    vertex(46 + x, 0.888907668031834 + y);\n",
    "    vertex(45 + x, 1.888907668031834 + y);\n",
    "    vertex(44 + x, 3.888907668031834 + y);\n",
    "    vertex(42 + x, 8.888907668031834 + y);\n",
    "    vertex(41 + x, 12.888907668031834 + y);\n",
    "    vertex(40 + x, 18.888907668031834 + y);\n",
    "    vertex(39 + x, 22.888907668031834 + y);\n",
    "    vertex(38 + x, 27.888907668031834 + y);\n",
    "    vertex(37 + x, 31.888907668031834 + y);\n",
    "    vertex(36 + x, 36.888907668031834 + y);\n",
    "    vertex(35 + x, 39.888907668031834 + y);\n",
    "    vertex(34 + x, 41.888907668031834 + y);\n",
    "    vertex(32 + x, 40.888907668031834 + y);\n",
    "    vertex(-11 + x, 41.888907668031834 + y);\n",
    "    vertex(-13 + x, 42.888907668031834 + y);\n",
    "    vertex(-15 + x, 41.888907668031834 + y);\n",
    "    vertex(-14 + x, 40.888907668031834 + y);\n",
    "    vertex(-13 + x, 38.888907668031834 + y);\n",
    "    vertex(-14 + x, 20.888907668031834 + y);\n",
    "    vertex(-15 + x, 18.888907668031834 + y);\n",
    "    vertex(-18 + x, 13.888907668031834 + y);\n",
    "    vertex(-19 + x, 10.888907668031834 + y);\n",
    "    vertex(-20 + x, 7.888907668031834 + y);\n",
    "    vertex(-21 + x, 6.888907668031834 + y);\n",
    "    vertex(-22 + x, 4.888907668031834 + y);\n",
    "    vertex(-23 + x, 2.888907668031834 + y);\n",
    "    vertex(-24 + x, 1.888907668031834 + y);\n",
    "    vertex(-25 + x, -0.11109233196816604 + y);\n",
    "    vertex(-26 + x, -2.111092331968166 + y);\n",
    "    vertex(-28 + x, -3.111092331968166 + y);\n",
    "    vertex(-29 + x, -5.111092331968166 + y);\n",
    "    vertex(-30 + x, -6.111092331968166 + y);\n",
    "    vertex(-31 + x, -7.111092331968166 + y);\n",
    "    vertex(-32 + x, -6.111092331968166 + y);\n",
    "    vertex(-33 + x, -3.111092331968166 + y);\n",
    "    vertex(-34 + x, -2.111092331968166 + y);\n",
    "    vertex(-36 + x, -1.111092331968166 + y);\n",
    "    vertex(-38 + x, -0.11109233196816604 + y);\n",
    "    vertex(-39 + x, 0.888907668031834 + y);\n",
    "    vertex(-44 + x, 3.888907668031834 + y);\n",
    "    vertex(-48 + x, 4.888907668031834 + y);\n",
    "    vertex(-51 + x, 7.888907668031834 + y);\n",
    "    vertex(-52 + x, 9.888907668031834 + y);\n",
    "    vertex(-53 + x, 11.888907668031834 + y);\n",
    "    vertex(-55 + x, 12.888907668031834 + y);\n",
    "    vertex(-56 + x, 9.888907668031834 + y);\n",
    "    vertex(-58 + x, 7.888907668031834 + y);\n",
    "    vertex(-59 + x, 4.888907668031834 + y);\n",
    "    vertex(-60 + x, 3.888907668031834 + y);\n",
    "    vertex(-63 + x, 1.888907668031834 + y);\n",
    "    vertex(-65 + x, -0.11109233196816604 + y);\n",
    "    vertex(-68 + x, -2.111092331968166 + y);\n",
    "    vertex(-69 + x, -5.111092331968166 + y);\n",
    "    vertex(-70 + x, -6.111092331968166 + y);\n",
    "    vertex(-72 + x, -7.111092331968166 + y);\n",
    "    vertex(-73 + x, -9.111092331968166 + y);\n",
    "    vertex(-74 + x, -10.111092331968166 + y);\n",
    "    vertex(-75 + x, -11.111092331968166 + y);\n",
    "    vertex(-76 + x, -12.111092331968166 + y);\n",
    "    vertex(-75 + x, -13.111092331968166 + y);\n",
    "    vertex(-74 + x, -17.111092331968166 + y);\n",
    "    vertex(-73 + x, -19.111092331968166 + y);\n",
    "    vertex(-72 + x, -20.111092331968166 + y);\n",
    "    vertex(-71 + x, -22.111092331968166 + y);\n",
    "    vertex(-69 + x, -23.111092331968166 + y);\n",
    "    vertex(-68 + x, -25.111092331968166 + y);\n",
    "    vertex(-65 + x, -27.111092331968166 + y);\n",
    "    vertex(-63 + x, -28.111092331968166 + y);\n",
    "    vertex(-61 + x, -29.111092331968166 + y);\n",
    "    vertex(-59 + x, -32.111092331968166 + y);\n",
    "    vertex(-58 + x, -33.111092331968166 + y);\n",
    "    vertex(-56 + x, -35.111092331968166 + y);\n",
    "    vertex(-55 + x, -37.111092331968166 + y);\n",
    "    vertex(-54 + x, -38.111092331968166 + y);\n",
    "    vertex(-53 + x, -37.111092331968166 + y);\n",
    "    vertex(-48 + x, -38.111092331968166 + y);\n",
    "    vertex(-46 + x, -39.111092331968166 + y);\n",
    "    vertex(-40 + x, -40.111092331968166 + y);\n",
    "    vertex(-31 + x, -39.111092331968166 + y);\n",
    "    vertex(-30 + x, -38.111092331968166 + y);\n",
    "    vertex(-26 + x, -37.111092331968166 + y);\n",
    "    endShape();\n",
    "    fill(0);\n",
    "    beginShape();\n",
    "    // paste pants here!\n",
    "    endShape();\n",
    "    popMatrix();\n",
    "}\n",
    "\n",
    "float[] angles = new float[25];\n",
    "\n",
    "void setup() {\n",
    "    size(500, 500);\n",
    "    angles[0] = .1;\n",
    "    angles[1] = .2;\n",
    "    angles[2] = .3;\n",
    "    angles[3] = .4;\n",
    "    angles[4] = .5;\n",
    "    angles[5] = .6;\n",
    "    angles[6] = .7;\n",
    "    angles[7] = .8;\n",
    "    angles[8] = .9;\n",
    "    angles[9] = 1.0;\n",
    "    angles[10] = 1.1;\n",
    "    angles[11] = 1.2;\n",
    "    angles[12] = 1.2;\n",
    "    angles[13] = 1.2;\n",
    "    angles[14] = 1.3;\n",
    "    angles[15] = 1.4;\n",
    "    angles[16] = 1.5;\n",
    "    angles[17] = 1.6;\n",
    "    angles[18] = 1.7;\n",
    "    angles[19] = 1.8;\n",
    "    angles[20] = 1.9;\n",
    "    angles[21] = 1.9;\n",
    "    angles[22] = 1.10;\n",
    "    angles[23] = 1.11;\n",
    "    angles[24] = 1.12;\n",
    "}\n",
    "\n",
    "void draw() {\n",
    "    background(255);\n",
    "    int a = 0;\n",
    "    for (int i=0; i <5; i++) {\n",
    "        for (int j=0; j < 5; j++) {\n",
    "            drawPerson(50 + i * 100, 50 + j * 100, random(3));\n",
    "            angles[a] = angles[a] + .5;\n",
    "            a++;\n",
    "        }\n",
    "    }\n",
    "    angle1 += PI/180 * 20;\n",
    "    //delay(1);\n",
    "}\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Calysto Processing",
   "language": "java",
   "name": "calysto_processing"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "text/x-java",
    "version": 2
   },
   "file_extension": ".java",
   "mimetype": "text/x-java",
   "name": "java"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}